
<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Report</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                            <div class="ibox-title" style="border: none;">
                              <h5 style="color: #00afef"><i>Meter Readings</i></h5>
                            </div>
                           <div class="ibox-content">
                            <form class="form-horizontal" id="mr_report">

                              <div class="form-group">
                                <label class="col-lg-3 control-label">Account Number</label>
                                  <div class="col-lg-7">
                                    <input type="text" name="acct_num" class="form-control">
                                  </div>
                              </div>

                              <div class="form-group">
                                <label class="col-lg-3 control-label">Account Name</label>
                                  <div class="col-lg-7">
                                    <input type="text" name="acct_name" class="form-control">
                                  </div>
                              </div>

                              <?php foreach ($zone1 as $key): ?>
                              <div class="form-group" style="display: <?php echo ($key->enable_flag == 'N' ? 'none' : ''); ?>">
                                      <label class="col-lg-3 control-label"><?php echo $key->field_label; ?></label>
                                  <?php endforeach;?>
                                  <div class="col-lg-7">
                                    <select name="zone_1" class="form-control chosen">
                                      <option value=""></option>
                                    <?php foreach ($zone as $key): ?>
                                        <option value="<?php echo $key->zone_value_name; ?>"><?php echo $key->zone_value_name; ?></option>
                                    <?php endforeach;?>
                                    </select>
                                  </div>
                              </div>

                              <?php foreach ($zone2 as $key): ?>
                              <div class="form-group" style="display: <?php echo ($key->enable_flag == 'N' ? 'none' : ''); ?>;">
                                      <label class="col-lg-3 control-label"><?php echo $key->field_label; ?></label>
                                  <?php endforeach;?>
                                  <div class="col-lg-7">
                                      <select name="zone_2" class="form-control chosen">
                                          <option value=""></option>
                                      </select>
                                  </div>
                              </div>

                              <div class="form-group" id="data_1">
                                <label class="col-lg-3 control-label">Reading From</label>
                                <div class="col-lg-7 input-daterange input-group" id="datepicker">
                                    <input type="search" class="form-control" name="mr_from" value="">
                                    <span class="input-group-addon">to</span>
                                    <input type="search" class="form-control" name="mr_to" value="">
                                </div>
                              </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label"></label>
                                     <div class="col-sm-10">
                                       <div class="row">
                                       <div class="col-md-9">
                                       <p class="text-center">
                                        <button class="btn btn-primary btn-outline btn-md m-t-n-xs" id="get-status-mr" type="button"><i class="fa fa-check fa-fw"></i> Get Status</button></p>
                                        </div>
                                      </div>
                                     </div>
                                  </div>
                             </form>
                           </div><!-- END OF IBOX CONTENT -->
                           <div id="result">
                              <div class="ibox-content">
                                <div class="row">
                                    <div class="col-xs-9">
                                    <div class="btn-group">
                                      <a id="to_pdf" href="#" class="btn btn-link" ><i class="fa fa-file-pdf-o fa-fw"></i> <small>Export as PDF</small></a>
                                      <a id="to_excel" href="#" class="btn btn-link" ><i class="fa fa-file-excel-o fa-fw"></i> <small>Export as Excel</small></a>
                                  </div>
                                     <!--  <div class="col-xs-3">
                                        <a id="to_pdf" class="btn btn-w-m btn-outline btn-link" href="#"><i class="fa fa-file-pdf-o fa-fw"></i> <small>Export as PDF</small></a>
                                      </div>
                                      <div class="col-xs-3">
                                        <a id="to_excel" class="btn btn-w-m btn-outline btn-link" href='#'><i class="fa fa-file-excel-o fa-fw"></i> <small>Export as Excel</small></a>
                                      </div>
                                      <div class="col-xs-3">
                                        <div class="">
                                            <button class="btn btn-w-m btn-outline btn-link dropdown-toggle" id="to_mail"><i class="fa fa-envelope-o fa-fw"></i> <small>Send to Email</small></button>
                                        </div>
                                      </div> -->
                                    </div>
                                </div>
                             </div><!-- END OF IBOX CONTENT -->
                             <br>
                             <p id="search_values"></p>
                             <div class="horizontal-slide">
                              <div class="table-responsive">
                                <!-- <table data-limit-navigation="5" data-page-size="20" data-filter="#filter" data-page-navigation=".pagination" class="footable table table-bordered table-hover" id="tbl_org" style="width:100%">
                                                               <table class="footable table table-bordered table-hover">
                                <thead>
                                  <tr>
                                    <th data-sort-ignore="true" ></th>
                                    <th data-type="numeric">Account</th>
                                    <th data-type="alpha">Account Name</th>
                                    <th data-type="alpha">Zone</th>
                                    <th data-type="numeric">Previous Read</th>
                                    <th data-type="numeric">Present Read</th>
                                    <th data-type="numeric">Read Date</th>
                                    <th data-type="numeric">Consumed</th>
                                    <th data-type="numeric">Bill Amount</th>
                                    <th data-type="numeric">Total Due</th>
                                    <th data-type="numeric">Special Read</th>
                                  </tr>
                                </thead>
                                <tbody id="result-table">
                                  <tr>
                                  </tr>
                                </tbody>
                                <tfoot >
                                                <tr>
                                                    <td colspan="11" style='border: none !important;'>
                                                        <ul class="pagination pull-left"></ul>
                                                    </td>
                                                </tr>
                                            </tfoot>
                                                              </table> -->
                                  <table class="dataTables table table-bordered table-hover">
                                    <thead>
                                      <th>Zone</th>
                                      <th>Book</th>
                                      <th>Account</th>
                                      <th>Account Name</th>
                                      <th>Previous Read</th>
                                      <th>Present Read</th>
                                      <th>Read Date</th>
                                      <th>Consumed</th>
                                      <th>Bill Amount</th>
                                      <th>Total Due</th>
                                      <th>Special Read</th>
                                    </thead>
                                    <tbody id="result-table"></tbody>
                                  </table>
                              </div>
                            </div>
                           </div>
                           <!-- <div class="ibox-content" id="email_html" style="display: none;">
                                  <form class="form-horizontal" id="email_form">
                                      <div class="form-group"><label class="col-sm-2 control-label">From:</label>
                                          <div class="col-sm-10"><input name="email_from" type="text" class="form-control" value="no-reply@ums.com"></div>
                                      </div>
                                      <div class="form-group"><label class="col-sm-2 control-label">To:</label>
                                          <div class="col-sm-10">
                                              <input name="email_to" type="text" class="form-control" value="">
                                            <!-- <div class="input-group">
                                              <input name="email_to" type="text" class="form-control" value="">
                                              <span class="input-group-btn"><button style="padding: 4px 12px; border-radius: none;" type="button" class="btn btn-white"><i class="fa fa-group fa-fw"></i></button></span>
                                            </div> -->
                                        <!--   </div>
                                      </div>
                                      <div class="form-group"><label class="col-sm-2 control-label">Subject:</label>
                                          <div class="col-sm-10"><input name="email_subj" type="text" class="form-control" value=""></div>
                                      </div>
                                       <div class="form-group"><label class="col-sm-2 control-label">File Name:</label>
                                          <div class="col-sm-10"><input name="email_filename" type="text" class="form-control" value=""></div>
                                      </div>
                                      <div class="form-group"><label class="col-sm-2 control-label">File Type:</label>
                                         <div class="col-sm-10"><label class="checkbox-inline">
                                          <input type="checkbox" name="email_topdf" value="pdf" checked> PDF (.pdf) </label> <label class="checkbox-inline">
                                          <input type="checkbox" name="email_toexcel" value="excel" > EXCEL (.xls) </label>
                                          <input style="border: none; width:0px" readonly type="text" name="email_error" value="">
                                        </div>
                                      </div>
                                       <div class="form-group"><label class="col-sm-2 control-label">Message:</label>
                                          <div class="col-sm-10">
                                            <div id="summernote"></div>
                                          </div>
                                      </div>
                                      <div class="form-group"><label class="col-sm-2 control-label"></label>
                                         <div class="col-sm-10">
                                           <button type="button" class="btn btn-white btn-md m-t-n-xs pull-right" id="email_cancel">Close</button>
                                           <button type="button" class="btn btn-success btn-md m-t-n-xs pull-right btn-margin-right" id="email_send">Send</button>
                                        </div>
                                      </div>
                                  </form> -->
                              <!-- </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
</div>
<script>
      $(document).ready(function(){
        $('.chosen').chosen({width: "100%"});
        $('#search select[name=zone_1]').change(function(){
            $.ajax({
                url: '<?php echo base_url($this->session->userdata("forajax")); ?>/getzone2',
                method: 'POST',
                data: { 'parent_id': $(this).val() },
                dataType: 'json',
                success: function(data){
                    console.log(data);
                        var tmp = '';
                        var state = '';
                        $.each(data, function(i,item){
                           tmp += '<option value="'+data[i].zone_value_name+'">'+data[i].zone_value_name+'</option>';
                        });
                        $('#search select[name=zone_2]').html( tmp );
                        $("#search select[name=zone_2]").trigger("chosen:updated");
                }
            });
        });

        $('#data_1 .input-daterange').datepicker({
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            format: "dd-M-yy"
        });
        $('#to_excel').hide();  $('#to_pdf').hide();

        // $('.footable').footable();
       $('#summernote').summernote({
          disableDragAndDrop: true,
          shortcuts: false,
          height: 200,
          placeholder: 'write here...',
          toolbar: [
            ['para', ['ul', 'ol']]
          ]
        });

       $('.dataTables').DataTable( {
                "uorder": [[ 1, "desc" ]],
                "columnDefs": [ {
                  "targets": 'no-sort',
                  "orderable": false,
            } ],
            "sDom": 'tip'
      });

        $('#get-status-mr').click(function(){
            $('.dataTables').dataTable().fnDestroy();
            $('#result-table').html('');
          $.ajax({
                        type: "POST",
                         url: "<?php echo base_url($this->session->userdata('forajax')); ?>/get_status_mr",
                        data: $('#mr_report').serialize(),
                        dataType: 'json',
                        success: function(data){
                           $('#get-status').removeAttr('disabled');
                            var tmp = "";
                            console.log(data.length);
                            if(data.length == 0){
                               $('#result-table').html('');
                               $('#to_excel').hide();
                               $('#to_pdf').hide();
                                $('#search_values').html('');
                                $('#search_values').hide();
                            }else{
                              //$('#search_values').show();
                              $('#search_values').html('Account Number: <strong>' + $('input[name=acct_num]').val() + '</strong></br>Account Name: <strong>' + $('input[name=acct_name]').val() + '</strong></br>Reading Date From: <strong>' + $('input[name=mr_from]').val() + '</strong> to <strong>' + $('input[name=mr_to]').val() + '</strong>');
                              $.each(data,function(i,item){
                                tmp += '<tr><td>'+ data[i].Zone +'</td><td>'+ data[i].book +'</td><td>'+ data[i].acct_num +'</td><td align="right">'+ data[i].account_name +'</td><td align="right">'+ data[i].prev_read +'</td><td align="right">'+ data[i].current_read +'</td><td align="right">'+ data[i].reading_date +'</td><td align="right">'+ data[i].consumed +'</td><td align="right">'+ parseFloat((data[i].bill_amt == '' ? 0 : data[i].bill_amt)).toFixed(2) +'</td><td align="right">'+ parseFloat((data[i].total_due == '' ? 0 : data[i].total_due)).toFixed(2) +'</td><td>'+ data[i].sp_type +'</td></tr>'
                              });
                             // $('#result-table').html(tmp).trigger('footable_redraw');
                             $('#result-table').html(tmp);
                             $('.dataTables').DataTable( {
                                         "order": [[ 1, "desc" ]],
                                        "columnDefs": [ {
                                          "targets": 'no-sort',
                                          "orderable": false,
                                    } ],
                                    "sDom": 'lTtip',
                                    "tableTools": {
                                          "aButtons": [{
                                                          "sExtends": "copy",
                                                          "sButtonText": "Copy to clipboard"
                                                      },
                                                      {
                                                          "sExtends": "xls",
                                                          "sButtonText": "Export to Excel"
                                                      }],
                                          "sSwfPath": "<?php echo base_url() ?>assets/js/plugins/dataTables/swf/copy_csv_xls_pdf.swf"
                                      }
                              });
                              $('#to_excel').attr('href','<?php echo base_url($this->session->userdata("forajax")); ?>/gen_excel?acct_num='+$('input[name=acct_num]').val()+'&acct_name='+$('input[name=acct_name]').val()+'&mr_from='+$('input[name=mr_from]').val()+'&mr_to='+$('input[name=mr_to').val());
                              $('#to_pdf').attr('href','<?php echo base_url($this->session->userdata("forajax")); ?>/gen_pdf?acct_num='+$('input[name=acct_num]').val()+'&acct_name='+$('input[name=acct_name]').val()+'&mr_from='+$('input[name=mr_from]').val()+'&mr_to='+$('input[name=mr_to]').val());
                              //$('#to_excel').show();
                              //$('#to_pdf').show();
                             
                              sessionStorage.acct_num = $('input[name=acct_num]').val();
                              sessionStorage.acct_nme = $('input[name=acct_name]').val();
                              sessionStorage.mr_from = $('input[name=mr_from]').val();
                              sessionStorage.mr_to = $('input[name=mr_to]').val();
                            }
                            $('#result').show();
                        },
                        complete: function() {
                           $('#get-status-mr').removeAttr('disabled');
                        },
                        beforeSend: function(){
                           $('#get-status-mr').attr('disabled',true);
                           //$('#result').hide();
                        }
                    });

        });




 
      });
</script>